import React, { Component } from 'react'
import {Card, Select, Input, Button, Table, message} from 'antd'
import Icon from '@ant-design/icons';

const Option = Select.Option

export default class Poem extends Component {
    state = {
        selectedRowKeys: [], 
        loading: false,
        inp:'',
        categorys:[], //作品列表
        id:0,
    };


    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };

    delTap=(b)=>{
        // console.log(this.state.categorys)
        console.log(b)
        fetch('https://wx.original5.xyz:2003/poem/',{
            method:'DELETE',
            body:JSON.stringify({
                Wid:b.Wid
            })
        }).then(res=> res.json())
        .then((data)=>{
            console.log('success',data)
        })
        window.location.reload()
    }

    // 初始化Table的所有列信息
    componentWillMount(){
        this.initColumns()
    }

    initColumns = () =>{
        this.columns = [
            // {
            //     title: 'Wimage',
            //     dataIndex: 'Wimage',
            //     data:'img',
            //     width:'100px',
            //     render:function(data,type,row,meta){
            //         return <img src='"+data+"' />;
            //     }
            // },
            
        //     {
        //         title: 'Uname',
        //         dataIndex: 'Uname',
        //         render:name => <a href="#">{name}</a>
        //     },
            {
                title: '诗名',
                dataIndex: 'wtitle',
            },
            {
                title: '朝代',
                dataIndex: 'wdynasty',
            },
            {
                title: '内容',
                dataIndex: 'wcontent',
            },
            {
                title: '译文',
                dataIndex: 'wtranslate',
            },
            {
                title: 'delete',
                dataIndex: 'delete',
                render:(_,b)=> <Button onClick={(e)=>this.delTap(b)} style={{backgroundColor:'#ffc06f'}}>删除</Button>
            },
        ];
    }
    // 发请求
    componentDidMount(){
        this.getCategorys()
    }

    getCategorys= async ()=>{
        this.setState({ loading:true })
        fetch('https://wx.original5.xyz:2003/poem/',{
            method:'GET',
            // mode:'no-cors',
            headers:{
                // 'access-control-allow-origin':'*',
                'Content-Type':'application/json;charset=UTF-8'
            },
            // mode:'no-cors',
        }).then(res=> res.json())
        .then((data)=>{
            console.log('sucs',data)
            this.setState({
                categorys:data
            })
        })

    }

    getInp = (e)=>{
        this.setState({
            inp:e.target.value
        })
    }

    onSearch = () =>{
        console.log(this.state.inp)
        const {inp} = this
        fetch(`https://wx.original5.xyz:2003/type/search?inp=${this.state.inp}`,{
            method:'GET',
            headers:{
                'Content-Type':'application/json;charset-UTF-8'
            },
        }).then(res=> res.json())
        .then((data)=>{
            console.log(data)
            this.setState({
                categorys:data
            })
        })
    }
    
    render() {
        const title = (
            <span>
                <Input style={{width:300, margin:'0 10px'}} onChange={this.getInp} placeholder="请输入诗名" />
                <Button type="primary" onClick={this.onSearch} style={{backgroundColor:'#ffc06f'}}>搜索</Button>
                <Button type="primary" onClick={this.showModal} style={{backgroundColor:'#ffc06f',position:'absolute',right:100}}>
                    + 添加
                </Button>
            </span>
        )

        const { categorys } = this.state
        return (
            <Card title={title}>
                <Table 
                    rowKey='id'
                    bordered={true} 
                    columns={this.columns}
                    dataSource={categorys}
                    pagination={{defaultPageSize:2, showQuickJumper:true}}
                />
            </Card>
        )
    }
}
